<template>
	<view>
		<uni-search></uni-search>
		<!-- 轮播 -->
		<swiper class="swiper" indicator-dots autoplay circular>
			<swiper-item v-for="(item,index) in lunbo" :key="index">
				<image :src="item.image_src" @tap="touch_img(item.goods_id)"/>
			</swiper-item>
		</swiper>
		<van-grid class="ccc">
			<van-grid-item use-slot v-for="(item,index) in daohang">
				<image :src="item.image_src" @tap="to_page(index)"></image>
			</van-grid-item>
		</van-grid>
		<!-- 楼层 -->
		<div class="boxs" v-for="(item,index) in louceng" :key="index">
			<div class="top">
				<image :src="item.floor_title.image_src"></image>
			</div>
			<div class="bottom">
				<div class="left" v-for="(it1,ind) in item.product_list" :key="ind" v-if="it1.image_width==232">
					<image :src="it1.image_src"></image>
				</div>
				<div class="right">
					<div class="right_img" v-for="(it2,inx) in item.product_list" :key="inx"
						v-if="it2.image_width!=232">
						<image :src="it2.image_src"></image>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lunbo: [],
				daohang: [],
				louceng: []
			};
		},
		onLoad() {
			this.getlunbo()
			this.getdaohang()
			this.getlouceng()
		},
		methods: {
			async getlunbo() {
				let {
					data: res
				} = await uni.$http.get("/api/public/v1/home/swiperdata")
				console.log(res)
				this.lunbo = res.message
			},
			async getdaohang() {
				let {
					data: res
				} = await uni.$http.get("/api/public/v1/home/catitems")
				console.log(res)
				this.daohang = res.message
			},
			async getlouceng() {
				let {
					data: res
				} = await uni.$http.get("/api/public/v1/home/floordata")
				console.log(res)
				this.louceng = res.message
			},
			// 导航跳转
			to_page(index) {
				if (index == 0) {
					wx.switchTab({
						url: '/pages/cate/cate'
					})
				}
			},
			// 点击轮播图
			touch_img(id){
				wx.navigateTo({
					url:'/pages/detail/detail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.ccc {
		width: 750rpx;
		display: flex;

		image {
			width: 180rpx;
			height: 200rpx;
		}
	}

	.boxs {
		width: 750rpx;
		height: 550rpx;
		display: flex;
		flex-direction: column;
		margin-top: 70rpx;

		.top {
			width: 750rpx;
			height: 100rpx;
			padding-left: 30rpx;
			margin-bottom: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.bottom {
			width: 750rpx;
			height: 430rpx;
			display: flex;
			justify-content: space-between;
			padding-left: 25rpx;

			.left {
				width: 250rpx;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				width: 500rpx;
				height: 430rpx;
				display: flex;
				flex-wrap: wrap;
				padding-left: 25rpx;

				.right_img {
					width: 210rpx;
					height: 210rpx;
					margin: 5rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
